HTML Buttons

Buttons are an essential part of web development, allowing users to interact with a webpage by submitting forms, triggering JavaScript actions, or navigating to different pages. In HTML, the <button> element is used to create buttons, and it comes with various types, attributes, and use cases.

The <button> Element

The <button> element is used to create clickable buttons. By default, it is rendered as a rectangular clickable element.

<!DOCTYPE html>
<html>
<body>
<button>Click Me</button>
<p>This creates a simple button.</p>
</body>
</html>

Types of Buttons in HTML

The <button> element has a type attribute that defines its behavior. There are three main types:

Submit Button (type="submit")

A submit button is used inside a form. When clicked, it submits the form data to the specified action URL.

<!DOCTYPE html>
<html>
<body>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>

Reset Button (type="reset")

A reset button clears all the form fields back to their default values.

<!DOCTYPE html>
<html>
<body>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="reset">Reset</button>
</form>
<p>Clicking "Reset" clears the email field.</p>
</body>
</html>

Regular Button (type="button")

A regular button does nothing on its own but can be used with JavaScript to trigger actions.

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!, I Love CodeNova.')">Click Me</button>
<p>  Clicking "Click Me" shows an alert with "Hello World!, I Love CodeNova.".</p>
</body>
</html>

Using <input> as a Button

In addition to <button>, you can also create buttons using the <input> element.

<!DOCTYPE html>
<html>
<body>
<input type="submit" value="Submit Form"><br><br>
<input type="reset" value="Clear Form"><br><br>
<input type="button" value="Click Me" onclick="alert('Hello!')">
</body>
</html>

Styling Buttons with CSS

By default, buttons have a basic style. You can customize them using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
.custom-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.custom-button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button class="custom-button">Click Me</button>
</body>
</html>

The button has a blue background, white text, and rounded corners. When hovered, the background becomes darker blue.

<!DOCTYPE html>
<html>
<head>
<style>
.container{
float: left;
}
.custom-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.custom-button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<div class="container">
<button class="custom-button">Button 1</button>
<button class="custom-button">Button 2</button>
<button class="custom-button">Button 3</button>
</div>
</body>
</html>

Button Best Practices

Use type="button" when using JavaScript

Use button instead of input for better styling and flexibility

Add aria-label for accessibility when needed

Use CSS to improve button appearance

Summary Table

Submit Submits form data. <button type="submit">Submit</button>

Reset Clears form fields. <button type="reset">Reset</button>

Button Triggers JavaScript actions. <button type="button" onclick="alert('Hi')>Click</button>

Disabled Makes button unclickable. <button disable>Can't click</button>

Autofocus Focuses on page load. <button autofocus>Focused</button>

*HTML Buttons*

Buttons are an essential part of web development, allowing users to interact with a webpage by submitting forms, triggering JavaScript actions, or navigating to different pages. In HTML, the <button> element is used to create buttons, and it comes with various types, attributes, and use cases.

The <button> Element

The <button> element is used to create clickable buttons. By default, it is rendered as a rectangular clickable element.

*Types of Buttons in HTML*

The <button> element has a type attribute that defines its behavior. There are three main types:

Submit Button (type="submit")

A submit button is used inside a form. When clicked, it submits the form data to the specified action URL.

Reset Button (type="reset")

A reset button clears all the form fields back to their default values.

Regular Button (type="button")

A regular button does nothing on its own but can be used with JavaScript to trigger actions.

Using <input> as a Button

In addition to <button>, you can also create buttons using the <input> element.

Styling Buttons with CSS

By default, buttons have a basic style. You can customize them using CSS.

The button has a blue background, white text, and rounded corners. When hovered, the background becomes darker blue.

Button Best Practices

Use type="button" when using JavaScript Use button instead of input for better styling and flexibility Add aria-label for accessibility when needed Use CSS to improve button appearance

Summary Table

HTML Buttons

Types of Buttons in HTML

Use type="button" when using JavaScript

Use button instead of input for better styling and flexibility

Add aria-label for accessibility when needed

Use CSS to improve button appearance